<!-- 住院总人次/占比 -->
<template>
    <div id="inpatients">
        <div class="row">
            <div class="name">医院</div>
            <div class="number">总人次</div>
            <div class="percent">占比</div>
            <div class="day">住院平均天数</div>
        </div>
        <div v-for="(item, index) in hosData" :key="index" class="row">
            <img src="../../assets/image/chartList/icon_1.png" alt="" class="img" />
            <div class="name">{{ item.HOS_NAME }}</div>
            <div class="number">{{ item.VALUE1 ? item.VALUE1 + "人" : '' }}</div>
            <div class="percent">{{ item.VALUE2 }}</div>
            <div class="day">{{ item.VALUE3 ? item.VALUE3 + "天" : '' }}</div>
        </div>
    </div>
</template>
<script>
import { getInpatientsData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {

            hosData: [
                { HOS_NAME: "人民医院", VALUE1: "", VALUE2: "", VALUE3: "" },
                { HOS_NAME: "二院", VALUE1: "", VALUE2: "", VALUE3: "" },
                { HOS_NAME: "中医院", VALUE1: "", VALUE2: "", VALUE3: "" },
                { HOS_NAME: "妇幼保健", VALUE1: "", VALUE2: "", VALUE3: "" },
                { HOS_NAME: "乡镇卫生院", VALUE1: "", VALUE2: "", VALUE3: "" },
            ],
        };
    },
    mounted() {

        this.inpatientsData()
    },

    methods: {
        inpatientsData() {
            let totalNumber = 0;
            const data = new Array(5).fill(0).map(() => Mock.Random.natural(300, 500));
            data.forEach((value, index) => {

                totalNumber += parseInt(value);
                this.hosData[index].VALUE1 = parseInt(value);
                this.hosData[index].VALUE3 = Mock.Random.integer(1, 30);

            });
            this.hosData.forEach((item) => {
                item.VALUE2 = (item.VALUE1 / totalNumber * 100).toFixed(2) + "%";
            });
        }
    },
};
</script>
<style lang="scss">
#inpatients {
    width: 100%;
    height: 100%;
    padding-top: 2px;

    .row {
        height: 40px;
        line-height: 48px;
        color: #fff;
        font-size: 18px;
        position: relative;
        text-align: center;

        .img {
            width: 29px;
            height: 29px;
            position: absolute;
            top: 8px;
            left: 5px;
        }

        .name {
            display: inline-block;
            margin-left: 10px;
            width: 140px;
        }

        .number {
            display: inline-block;
            width: 110px;
        }

        .percent {
            display: inline-block;
            width: 115px;
        }

        .day {
            display: inline-block;
            width: 110px;
        }
    }
}
</style>